<template>
	<a-input
		v-model:value="searchValue"
		class="global-input-search"
		:placeholder="props.placeholder"
		:maxlength="20"
		allow-clear
		:style="{ width: `${props.width}px`, height: '36px', color: '#4E596A' }"
		@press-enter="pressEnter"
		@change="changeSearch"
		@focus="focus"
	>
		<template #prefix>
			<global-svg-icon
				icon-name="searchLine"
				style="vertical-align: bottom; color: #4e596a"
				width="18px"
				height="18px"
				@click="() => debounceSearch()"
		/></template>
	</a-input>
</template>

<script setup lang="ts" name="global-input-search">
import { computed } from 'vue';
import { g6Debounce } from 'glasssix-utils-ts';

type TsProps = {
	placeholder: string;
	width?: number;
	value: string | number;
};

const props = withDefaults(defineProps<TsProps>(), {
	placeholder: 'placeholder',
	width: 192,
	value: ''
});
const emits = defineEmits<{
	(e: 'update:value', value: string | number): void;
	(e: 'search'): void;
	(e: 'focus'): void;
}>();

const focus = (): void => {
	emits('focus');
};

const debounceSearch = g6Debounce(() => {
	emits('search');
}, 300);

const searchValue = computed({
	get() {
		return props.value;
	},
	set(val) {
		emits('update:value', val);
	}
});

const pressEnter = (e: KeyboardEvent): void => {
	e.code === 'Enter' && debounceSearch();
};

const changeSearch = (): void => {
	console.log('变化');

	debounceSearch();
};
</script>

<style lang="less">
.global-input-search {
	border: 1px solid @mask02;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	background: transparent;

	.ant-input {
		color: @text01 !important;
		background-color: transparent !important;

		&::placeholder {
			color: @text04 !important;
		}
	}

	.ant-input-affix-wrapper {
		background-color: transparent !important;
	}
}
</style>
